<template>
  <div >
    <el-form label-position="left" label-width="100px" ref="configForm" :model="configForm" :rules="rules">
      <el-form-item label="中文名称"  prop="fileZhName" >
        <el-col :span="12">
          <el-input v-model="configForm.fileZhName" id="fileZhName" size=small style="width: 400px"  placeholder="请输入文件中文名称"/>
        </el-col>
      </el-form-item>
      <el-form-item label="英文名称" prop="fileEnName" >
        <el-col :span="12">
          <el-input v-model="configForm.fileEnName" id="fileEnName" size=small style="width: 400px" placeholder="请输入文件英文名称，保证唯一" />
        </el-col>
      </el-form-item>
      <el-form-item label="权限组"  prop="roleGroup" >
        <el-col :span="12">
          <el-select v-model="configForm.roleGroup" filterable clearable placeholder="请选择"  size="small" style="width: 400px">
            <el-option
              v-for="(item, key) in roleGroup"
              :key="key"
              :value="item"
              :label="item"
              size="small"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="业务类型" prop="bizType" >
        <el-col :span="12">
          <el-select v-model="configForm.bizType" filterable clearable  placeholder="请选择" size="small" style="width: 400px">
            <el-option
              v-for="(item, key) in bizType"
              :key="key"
              :value="item.dictValue"
              :label="item.dictLabel"
              size="small"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="机型"   prop="airplaneType" >
        <el-col :span="12">
          <el-select v-model="configForm.airplaneType" filterable clearable placeholder="请选择" size="small" style="width: 400px">
            <el-option
              v-for="(item, key) in airplaneType"
              :key="key"
              :value="item.dictValue"
              :label="item.dictLabel"
              size="small"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="配置点类型"   prop="configType" >
        <el-col :span="12">
          <el-select v-model="configForm.configType"  filterable clearable  placeholder="请选择" size="small" style="width: 400px">
            <el-option
              v-for="(item, key) in configType"
              :key="key"
              :value="item.dictValue"
              :label="item.dictLabel"
              size="small"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="配置导入" size="small" style="width: 400px" prop="fileList">
        <p-upload-file @uploadFile="uploadFile"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark" >
        <el-col :span="12">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入配置说明"
            v-model="configForm.remark" size="small" style="width: 400px">
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="submit('configForm')" style="position: relative;left: 150px;">提交</el-button>
        <el-button   @click="close" style="position: relative;left: 250px;">返回</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="confirmShow" width="60%" top="7vh" class="techDoc_dialog" @close="closeEdit"
               append-to-body="true" :close-on-click-modal="false" :destroy-on-close="true" >
      <p-config-confirm :state="1" @closeEdit="closeEdit"></p-config-confirm>
    </el-dialog>
  </div>
</template>

<script>
import { queryConfig, addConfig, verifyEnNameAndRule } from '@/api/config/config'
import { dictChildDetail } from '@/api/dict/dict'
import pConfigConfirm from '@/views/config/ConfigConfirm'
import pUploadFile from '@/components/uploadFile'
import roleGroup from '../role/roleGroup'
export default {
  name: 'pEdit',
  components: {
    pConfigConfirm,
    pUploadFile
  },
  data () {
    return {
      // 业务类型
      bizType: [],
      // 机型
      airplaneType: [],
      //  配置点
      configType: [],
      //  状态
      status: [],
      //  使用状态
      useStatus: [],
      //  权限组
      roleGroup: [],
      //  配置数据对象
      configForm: {
        fileZhName: '',
        fileEnName: '',
        roleGroup: '',
        bizType: '',
        airplaneType: '',
        configType: '',
        remark: '',
        fileList: ''
      },
      rules: {
        fileZhName: [
          {required: true, message: '配置中文名名称不能为空', trigger: 'blur'}
        ],
        fileEnName: [
          {required: true, message: '配置中文名名称不能为空', trigger: 'blur'}
        ],
        roleGroup: [
          {required: true, message: '权限组必选', trigger: 'change'}
        ],
        bizType: [
          {required: true, message: '业务类型必选', trigger: 'change'}
        ],
        airplaneType: [
          {required: true, message: '机型必选', trigger: 'change'}
        ],
        configType: [
          {required: true, message: '配置点类型必选', trigger: 'change'}
        ],
        fileList: [
          {required: true, message: '请至少上传一个文件', trigger: 'change'}
        ],
        remark: [
          {required: true, message: '备注信息不能为空', trigger: 'blur'}
        ]
      },
      closeStatus: false,
      confirmShow: false
    }
  },
  props: ['configId', 'handle'],
  created () {
    // 业务类型
    const bizType = 'bizType'
    dictChildDetail(bizType).then((res) => {
      this.bizType = this.handleDict(res.data)
    })

    // 机型
    const airplaneType = 'airplaneType'
    dictChildDetail(airplaneType).then((res) => {
      this.airplaneType = this.handleDict(res.data)
    })
    // 配置点
    const configType = 'configType'
    dictChildDetail(configType).then((res) => {
      this.configType = this.handleDict(res.data)
    })
    // 权限组
    let user = localStorage.getItem('userInfo')
    this.roleGroup = JSON.parse(user).group
    console.log('权限组：' + roleGroup)
    // 配置状态
    const status = 'status'
    dictChildDetail(status).then((res) => {
      this.status = this.handleDict(res.data)
    })
    // 使用状态
    const useStatus = 'useStatus'
    dictChildDetail(useStatus).then((res) => {
      this.useStatus = this.handleDict(res.data)
    })
  },
  watch: {
  },
  beforeMount () {
    this.getPathFun()
  },
  methods: {
    //  展示配置编辑页面
    close () {
      if (this.handle === 'add') {
        this.configForm = {}
      }
      this.$emit('closeEdit', this.closeStatus)
    },
    getPathFun () {
      if (this.handle === 'edit') {
        this.initConfig()
      } else {
        this.configForm = {}
      }
    },
    //  TODO 初始化查询配置
    initConfig () {
      const id = this.configId
      if (id !== '0') {
        queryConfig(id).then((res) => {
          if (res.code === 0) {
            this.configForm = res.data
          }
        })
      } else {

      }
    },
    //  TODO 提交配置
    submit (formName) {
      //  TODO提交配置数据接口成功后显示确认页面
      this.$refs[formName].validate(valid => {
        if (valid) {
          verifyEnNameAndRule(this.configForm.fileEnName, this.configForm.roleGroup).then((res) => {
            if (res.code === 5002) {
              this.$notify.error({'title': '提示', 'message': '校验当前权限组下已存在配置文件英文名' + this.configForm.fileEnName})
            } else {
              addConfig(this.configForm).then((req) => {
                if (req.code === 0) {
                  this.$notify.success('配置文件信息上传成功')
                  this.$emit('closeEditAndOpenConfirmConfig', req.data)
                }
              })
            }
          })
        } else {
          this.$notify.error({'title': '提示', 'message': '当前输入项有误，请认真核实'})
        }
      })
    },
    closeEdit (val) {
      this.confirmShow = val
    },
    uploadFile (val) {
      this.configForm.fileList = val
    },
    verifyEnNameAndRule (fileEnName, roleGroup) {

    }
  }
}
</script>
